<template>
  <div class="container">
    <div class="container-top">
      <div class="top-name">新增/编辑轮播图</div>
    </div>
    <div class="header">
      <el-button
        type="primary"
        @click="back"
      >返回</el-button>
    </div>
    <div class="main">
      <el-form
        :model="information"
        :rules="rules"
        ref="information"
        label-width="180px"
        class=""
      >
        <el-form-item
          label="广告类型:"
          prop="adType"
        >
          <el-select
            filterable
            v-model='information.adType'
            placeholder='-请选择-'
          >
            <el-option
              v-for="item in bannerArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="产品:"
          prop="value"
          v-if="information.adType == 'PRODUCT'"
        >
          <el-select
            filterable
            v-model='information.value'
            placeholder='-请选择-'
          >
            <el-option
              v-for="item in sortArr"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="链接地址:"
          prop="value"
          v-if="information.adType == 'OUTER_CHAIN'"
        >
          <el-input
            v-model="information.value "
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="轮播图片："
          prop="bannerImage"
        >
          <el-upload
            class="avatar-uploader"
            :http-request="myUpload"
            :action="upLoadUrl"
            :show-file-list="false"
            :before-upload="beforeCoverUpload"
          >
            <img
              v-if="coverImage"
              :src="coverImage"
              class="avatar"
            >
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
            ></i>
          </el-upload>
          <div class="up-tips">建议上传封面尺寸：400*200</div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('information')"
            :loading="loading"
          >保存</el-button>
          <el-button
            type="primary"
            @click="back"
          >返回</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>

</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
import $ from "jquery";
export default {
  data() {
    return {
      url: "broadcastEdit",
      id: "",
      isEdit: false,
      currentPage: 1,
      upLoadUrl: "",
      // 单张封面
      coverImage: "",
      bannerArr: [
        {
          name: "外链",
          id: "OUTER_CHAIN"
        },
        {
          name: "产品",
          id: "PRODUCT"
        }
      ],
      information: {
        "adType": "",
        "bannerImage": "",
        "id":"",
        "remark": "",
        "value": ""
      },
      sortArr: [],
      rules: {
        // description: [
        //   { required: true, message: "请输入描述", trigger: "blur" }
        // ],
        // sortCode: [
        //   { required: true, message: "请输入排序数字", trigger: "blur" }
        // ]
      },
      loading: false,
      currentPage: 1,
      type:''
    };
  },
  components: {
    "bg-editor": () => import("../common/bg-editor.vue")
  },
  watch:{
     
  },
  mounted() {
    this.currentPage = this.$router.currentRoute.query.currentPage
      ? this.$router.currentRoute.query.currentPage
      : 1;
    this.id = this.$router.currentRoute.query.id;
    this.type = this.$router.currentRoute.query.type;
    let sessionId = sessionStorage.getItem("sessionId");
    this.getList();
    this.upLoadUrl =
      CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS + "?sessionId=" + sessionId;
    if (this.id&&this.type !='add') {
      this.getDetailById();
    }
//    if (this.type) {
//      return;
//    }

  },
  methods: {
    handleClick(e) {
      this.$router.push(`/${e.name}`);
    },
    getDetailById: function() {
      let url = CONSTANT.URL.LIST.bannerByid;
      common.get(url, `/${this.id}`, res => {
        if (res.code == 200) {
          let data = res.data.bussData;
          this.coverImage = data.bannerImageUrl;
          this.information = {
            "adType": data.adType,
            "bannerImage": data.bannerImage,
            "id":data.id,
            "remark": data.remark,
            "value": data.value,
          };
        }
      });
    },
    back() {
      this.$router.push({
        path: "/bannerList",
        query: { pageIndex: this.currentPage }
      });
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.PRODUCTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000
      };
      common.post(url, data, res => {
        this.sortArr = res.data.bussData;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          let url = CONSTANT.URL.LIST.bannerSave;
          common.post(url, this.information, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.loading = false;
              this.$router.replace({
                path: "/bannerList",
                query: { pageIndex: this.currentPage }
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    linkToList() {
      this.$router.push("/bannerList");
    },
    back() {
      this.$router.push({
        path: "/bannerList",
        query: { pageIndex: this.currentPage }
      });
    },
    myUpload(content) {}, // 重写覆盖上传方法
    beforeCoverUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      let url =
            CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 
      // suffix:file.name.split(".")[1],   // 文件后缀  png
      // contentType:file.type             // 文件类型  image/png
      common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
        let data = res.data.bussData;
        common.uploadFile(data.uploadUrl, file, file.type, res => {
          this.information.bannerImage = data.fileKey;
          this.coverImage = data.downloadUrl;
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
